<style lang="less" scoped>

  .div-order-manage-sty {
    height: 92%;
    display: flex;

  }

  .el-row {
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #ffffff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-button {
    width: 100%;
    margin: auto;
  }

  .el-col-2 {
    text-align: center;
  }

  .f-b1 {
    border-top: 1px solid #c8c8c8;
    line-height: 36px;
    margin-bottom: 0;
  }

  .f-bb1 {
    border-bottom: 1px solid #c8c8c8;
  }

  .f-bo {
    border: 0;
  }

  .f-w70 {
    width: 70%;
  }

  .f-mb {
    margin-bottom: 0;
  }

  .f-fr {
    float: right;
  }

  .f-wa {
    width: auto;
  }

  .f-mt {
    margin-top: 20px;
  }

  .f-mt10 {
    margin-top: 10px;
  }

  .f-mr20 {
    margin-right: 20px;
  }

  .f-ml10 {
    margin-left: 10px;
  }

  .f-mr10 {
    margin-right: 10px;
  }

  .f-bc {
    background: #eef1f6;
  }

  .div-content-sty {
    width: 99%;
    float: right;
  }

  .f-mb10 {
    margin-bottom: 10px;
  }

  li {
    list-style-type: none;
  }

  .f-mt5 {
    margin-top: 5px;
  }

  .f-mr5 {
    margin-right: 5px;
  }

  .f-tc {
    color: #20a0ff;
  }

  .f-txc {
    text-align: center;
  }

  .active {
    display: none;
  }

  .f-pa {
    position: absolute;
  }

  .f-w20 {
    width: 20px;
  }

  .f-h20 {
    height: 20px;
  }

  .f-mb {
    margin-bottom: 0px;
  }

  .order-info-item {
    width: 100%;
  }

</style>

<template>
  <section>
    <search-bar more-display>
      <el-row>
        <el-col :span="8">
          <el-form-item class="f-mb" prop="orderNumber" label="订单编号/运单号">
            <el-input v-model="searchForm.orderNumber"
                      placeholder="请输入订单编号/运单号,多订单查询逗号隔开">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="发运日期">
            <el-date-picker v-model="searchForm.shipmentsDate" class="f-w70"
                            type="daterange"
                            align="right"
                            placeholder="请选择发运日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="订单来源" prop="orderSource">
            <el-select v-model="searchForm.orderSource" class="f-w70"
                       placeholder="请选择状态">
              <el-option
                v-for="item in $store.getters.ORDER_SOURCE"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item class="f-mb" label="发货客户">
            <el-input v-model="searchForm.memberUserName" class="f-w70"
                      placeholder="请输入客户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="发货人" prop="shipmentsContactName">
            <el-input v-model="searchForm.shipmentsContactName" class="f-w70"
                      placeholder="请输入发货人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="发货人手机" prop="shipmentsContactPhone">
            <el-input v-model="searchForm.shipmentsContactPhone" class="f-w70"
                      placeholder="请输入发货人手机"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item class="f-mb" label="收货人" prop="sendContactName">
            <el-input v-model="searchForm.sendContactName" class="f-w70"
                      placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="收货人手机" prop="sendContactPhone">
            <el-input v-model="searchForm.sendContactPhone" class="f-w70"
                      placeholder="请输入收货人手机"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="等通通知放货状态" prop="noticeDeliveryStatus">
            <el-select v-model="searchForm.noticeDeliveryStatus" class="f-w70"
                       placeholder="请选择等通通知放货状态">
              <el-option
                v-for="item in $store.getters.ORDER_NOTICE_DELIVER_STATUS"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="专线组织">
            <el-cascader style="width: 100%"
                         v-model="searchForm.currentSpecialLineIds"
                         :props="{value:'id',label:'name'}"
                         :options="$store.getters.ORGANIZATIONS||[]">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="订单状态" prop="shipmentsTelephone">
            <el-select v-model="searchForm.orderStatus" class="f-w70"
                       placeholder="请选择状态">
              <el-option
                v-for="item in $store.getters.ORDER_STATUS"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="f-mb" label="运输方式" prop="agingDictEntityId">
            <el-select v-model="searchForm.agingDictEntityId" class="f-w70"
                       placeholder="请选择运输方式">
              <el-option
                v-for="item in $store.getters.AGING_CLASSIFICATION"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!--<el-button type="primary" @click="searchOrderTable" slot="append">查询</el-button>-->
    <div>
      <el-button type="primary" style="float: right;width: 45px;margin-left: 10px;margin-bottom: 10px"  @click="resetConditions">重置</el-button>
      <el-button type="primary" style="float: right;width: 45px;margin-bottom: 10px" @click="searchOrderTable">查询</el-button>
    </div>
    <!--列表-->
    <el-table :data="orderTableData" max-height="670" border
              v-loading="listLoading">
      <el-table-column prop="orderNumber" label="订单编号" width="150" align="center">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="openDialog(scope.row.id,scope.row.orderNumber)">{{ scope.row.orderNumber}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="transportationNumber" label="运单号" width="150" align="center">
      </el-table-column>
      <el-table-column prop="loadingListNumber" label="装车单号" min-width="200" header-align="center">
      </el-table-column>
      <el-table-column prop="name" label="计划时间" width="250" header-align="center">
        <template slot-scope="scope">
          <li>提交时间&nbsp;&nbsp;{{scope.row.createDate}}</li>
          <li>
            发运日期&nbsp;&nbsp;{{scope.row.shipmentsDate}}
          </li>
          <li v-if="scope.row.extractType===105002001">计划提货&nbsp;&nbsp;{{scope.row.extractDate}} {{scope.row.extractTime}}</li>
          <li v-if="scope.row.extractType===105002002">
            {{scope.row.extractTypeName}}&nbsp;&nbsp;{{scope.row.startNetWorkName}}
          </li>
          <li v-if="scope.row.sendType===105001001">计划送抵&nbsp;&nbsp;{{scope.row.sendTime}}</li>
          <li v-if="scope.row.sendType===105001002">{{scope.row.sendTypeName}}&nbsp;&nbsp;{{scope.row.endNetWorkName}}
          </li>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="订单金额（元）" width="120" align="center">
        <template slot-scope="scope">
          <div class="div-w100 f-tc f-txc">
            <li class="f-c-red f-mt10">{{scope.row.orderPrice}}元</li>
            <li class="f-mt10" style="color: red">{{scope.row.payStatusName}}</li>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="订单状态" width="100" align="center">
        <template slot-scope="scope">
          <li>
            {{scope.row.orderStatusName}}
          </li>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="发货人信息" width="240" header-align="center">
        <template slot-scope="scope">
          <li>
            {{scope.row.shipmentsContactName}}
          </li>
          <li>
            {{scope.row.shipmentsContactPhone}}
            <label
              v-if="scope.row.shipmentsContactPhone!=''&&scope.row.shipmentsContactPhone!=null&&scope.row.shipmentsContactPhone!=undefined&&scope.row.shipmentsTelephone!=''&&scope.row.shipmentsTelephone!=null&&scope.row.shipmentsTelephone!=undefined">,</label>
            {{scope.row.shipmentsTelephone}}
          </li>
          <li>
            {{scope.row.shipmentsProvince}}{{scope.row.shipmentsCity}}{{scope.row.shipmentsCounty}}{{scope.row.shipmentsTown}}{{scope.row.shipmentsStreet}}
          </li>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="收货人信息" width="240" header-align="center">
        <template slot-scope="scope">
          <li>
            {{scope.row.sendContactName}}
          </li>
          <li>
            {{scope.row.sendContactPhone}}
          </li>
          <li>
            {{scope.row.sendProvince}}{{scope.row.sendCity}}{{scope.row.sendCounty}}{{scope.row.sendTown}}{{scope.row.sendStreet}}
          </li>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="货物信息" width="140" header-align="center">
        <template slot-scope="scope">
          <div class="f-txc">
            <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].cargoName}}&nbsp;&nbsp;</li>
            <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].amount}}&nbsp;&nbsp;件</li>
            <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].weight}}&nbsp;&nbsp;吨</li>
            <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].volume}}&nbsp;&nbsp;方</li>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="f-mt10"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total,sizes,prev, pager, next, jumper"
                   :total="total" style="float: right">
    </el-pagination>
    <order-track-detail ref="orderTrackDetail"></order-track-detail>

    <!-- 图片显示弹窗框-->
  </section>
</template>
<script>
import {
  getOrderTableData
} from '../../api/order/orderTrack.js';
import OrderTrackDetail from './OrderTrackDetail.vue';
import { isEmpty } from '../../lib/util.js';

export default {
  components: {
    OrderTrackDetail
  },
  data () {
    return {
      // -------------------通用-------------------
      token: this.$store.state.token,

      // -------------------主列表----开始--------------------------
      listLoading: false,
      // 查询条件
      searchForm: {
        orderNumber: null, // 订单号
        //          freightNumber: null, // 货运单号-客户
        //          transportationNumber: null, // 运单号-平台
        loadingListNumber: null, // 装车单号
        shipmentsDate: null, // 发运日期
        orderSource: null, // 订单来源
        orderStatus: null, // 订单状态 （待确认，待支付，待分派，待签收，待评价）
        memberUserName: null, // 客户名称
        shipmentsContactName: null, // 发货人名称
        sendContactName: null, // 收货人名称
        noticeDeliveryStatus: null,
        currentSpecialLineIds: null,
        agingDictEntityId: null
      },
      total: 0,
      currentPage: 1,
      pageSize: 10,
      orderTableData: []
    };
  },
  methods: {
    // ----------------主列表--开始-----------------------
    // --每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchOrderTable();
    },
    // --第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchOrderTable();
    },
    // -- 检索订单信息
    searchOrderTable () {
      this.fs = '';
      let filters = 'NOTEQ_isDelete=111002001;';
      let sf = this.searchForm;
      for (let s in sf) {
        if (sf[s] == null || sf[s] === undefined || sf[s] === '') { continue; }
        if (s === 'orderNumber') {
          if (sf[s].indexOf(',') > -1) {
            let orderNumbers = sf[s].split(',');
            for (let p in orderNumbers) {
              if (p !== 'contains' && orderNumbers[p] !== '' && orderNumbers[p] !== undefined && orderNumbers[p] !== null) {
                filters += 'LIKE_orderNumber=' + orderNumbers[p] + '&group8;LIKE_freightNumber=' + orderNumbers[p] + '&group8;LIKE_transportationNumber=' + orderNumbers[p] + '&group8;';
              }
            }
          } else {
            filters += 'LIKE_orderNumber=' + sf[s] + '&group8;LIKE_freightNumber=' + sf[s] + '&group8;LIKE_transportationNumber=' + sf[s] + '&group8;';
            continue;
          }
        }
        ;
        if (s === 'orderStatus') {
          filters += 'EQ_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'memberUserName') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'shipmentsContactName') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'shipmentsContactPhone') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'sendContactName') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'sendContactPhone') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'noticeDeliveryStatus') {
          filters += 'EQ_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'currentSpecialLineIds') {
          filters += 'LIKE_trunkTasks.' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'agingDictEntityId') {
          filters += 'EQ_' + s + '=' + sf[s] + ';';
          continue;
        }
        ;
        if (s === 'shipmentsDate' && sf[s][0] !== null) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_' + s + '=' + startDate + ';LTE_' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'orderSource') {
          filters += 'EQ_' + s + '=' + sf[s] + ';';
          continue;
        }
      }
      if (filters.substring(filters.length - 1, filters.length) === ';') {
        filters = filters.substring(0, filters.length - 1);
      }
      this.listLoading = true;
      getOrderTableData({
        token: this.token,
        filters: isEmpty(this.fs) ? filters : this.fs,
        sorts: '-createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        this.listLoading = false;
        if (res.data.successFlg === true && res.data.detailModelList.length > 0) {
          this.orderTableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        } else {
          this.orderTableData = [];
        }
      });
    },
    // 重置查询条件
    resetConditions () {
      for (let p in this.searchForm) {
        this.searchForm[p] = null;
      }
    },
    // ----------------主列表--结束-----------------------
    // ----------------物流相关信息-----------开始------------
    // ---1) 打开弹窗页面（含物流跟踪，订单信息，评价详情，地图轨迹）
    openDialog (orderId, orderNumber) {
      this.$refs.orderTrackDetail.show(orderId, orderNumber);
    }
  },
  mounted () {
    this.searchOrderTable();
    this.$store.commit('initDict');
    this.$store.commit('initOrganizations');
  }
};
</script>
